<template>
  <div class="inspectionSheet">
    <el-descriptions title="质量检验表" :column="6" border>
      <el-descriptions-item :span="6" label="检验阶段">
        <span>{{ checkStageObj[ruleForm.checkStageId] }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="供应商">
        <span>{{ ruleForm.supplier }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="检验时间">
        <span>{{ ruleForm.checkTime }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="码单号">
        <span>{{ ruleForm.codeNo }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="投入设施">
        <span>{{ ruleForm.facilityName }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="检验品种">
        <span>{{ ruleForm.plantVarietyName }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="品种规格">
        <span>{{ ruleForm.specificationName }}</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="重量">
        <span>{{ ruleForm.weight }}斤</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="粒数">
        <span>{{ ruleForm.num }}粒</span>
      </el-descriptions-item>
      <el-descriptions-item :span="2" label="检验人">
        <span>{{ ruleForm.staffName }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <div class="th flex" v-show="scopeTypeList && scopeTypeList.length > 0">
      <div class="f_1 content th_title">检验范畴</div>
      <div class="f_2 ">
        <div class="flex">
          <div class="content f_2_1 th_title">检验科目</div>
          <div class="content f_2_2 th_title">检验标准</div>
          <div class="content f_2_3 th_title">检验结果</div>
        </div>
      </div>
    </div>
    <div class="content danger" v-show="!(scopeTypeList && scopeTypeList.length > 0)">请先选择范畴！
    </div>
    <div v-if="resetRadio" class="tr flex" v-show="item.list && item.list.length" v-for="item, index in scopeTypeList"
      :key="index">
      <div class="f_1 content">{{ item.scopeTypeName }}</div>
      <div class="f_2">
        <div class="flex" v-for="sub, i in item.list" :key="i">
          <div class="content f_2_1">{{ sub.checkScopeName }}</div>
          <div class="content f_2_2">
            <span class="error" v-show="sub.oneVoteDownFlag">【{{ sub.oneVoteDownFlag ? '一票否决' : '' }}】</span>{{
      sub.checkStandard }}
          </div>
          <div class="content f_2_3">
            <span :class="Number(sub.receiveSocre)==0 ? 'messge' : ''">{{ sub.receiveSocre || 0 }}分</span>
          </div>
        </div>
      </div>
    </div>
    <div class="totalSocre" v-show="totalSocre > -1">
      <span class="passSocre">合格线：{{ passSocre }}分</span>
      <span>
        综合得分
      <span v-show="totalSocre <= 60" :class="totalSocre <= 60 ? 'error' : ''">{{ totalSocre }}分</span>
      <span v-show="totalSocre <= 80 && totalSocre > 60"
        :class="totalSocre <= 80 && totalSocre > 60 ? 'warning' : ''">{{ totalSocre }}分</span>
      <span v-show="totalSocre <= 100 && totalSocre > 80"
        :class="totalSocre <= 100 && totalSocre > 80 ? 'success' : ''">{{ totalSocre }}分</span>
      </span>
    </div>
    <el-descriptions v-if="userType" :column="6" border>
      <template v-if="userType == 'TECHNICIAN' || userType == 'FARMER'">
        <el-descriptions-item :span="6" :label="`检验员(${ruleForm.staffName})`" label-class-name="my-label">
          结论:{{ ruleForm.staffResult || '未做结论' }}
        </el-descriptions-item>
      </template>

      <template v-if="userType == 'FARMER'">
        <el-descriptions-item :span="4" :label="`技术员(${ruleForm.technicianName})`" label-class-name="my-label">
          结论:{{ ruleForm.technicianResult || '未做结论' }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="评定结果" label-class-name="my-label">
          {{ ruleForm.technicianStatus }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-descriptions v-if="!userType" :column="6" border>

      <template>
        <el-descriptions-item :span="6" :label="`检验员(${ruleForm.staffName})`" label-class-name="my-label">
          结论:{{ ruleForm.staffResult || '未做结论' }}
        </el-descriptions-item>
      </template>

      <template>
        <el-descriptions-item :span="4" :label="`技术员(${ruleForm.technicianName})`" label-class-name="my-label">
          结论:{{ ruleForm.technicianResult || '未做结论' }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="评定结果" label-class-name="my-label">
          {{ ruleForm.technicianStatus }}
        </el-descriptions-item>
      </template>

      <template v-if="ruleForm.farmId">
        <el-descriptions-item :span="4" :label="`场长(${ruleForm.farmName})`" label-class-name="my-label">
          结论:{{ ruleForm.farmResult || '未做结论' }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="评定结果" label-class-name="my-label">
          {{ ruleForm.farmStatus }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-descriptions :column="6" border>

      <template v-if="userType == 'INSPECTOR'">
        <el-descriptions-item :span="6" label="检验员结论" label-class-name="my-label">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.staffResult">
          </el-input>
        </el-descriptions-item>
        <el-descriptions-item :span="6" label="操作 (提交给技术员审核)" label-class-name="my-label">
          <el-button type="primary" plain @click="submit">提交表单</el-button>
        </el-descriptions-item>
      </template>

      <template v-if="userType == 'TECHNICIAN'">
        <el-descriptions-item :span="6" label="技术员" label-class-name="my-label">
          <el-select v-model="ruleForm.technicianId" class="w100p" clearable placeholder="请选择技术员"
            @change="handleChangePersonTechnician">
            <el-option v-if="item.type == 'TECHNICIAN'" v-for="item, index in personList" :key="index"
              :label="item.staffName" :value="item.staffId"></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item :span="6" label="技术员结论" label-class-name="my-label">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.technicianResult">
          </el-input>
        </el-descriptions-item>
        <el-descriptions-item :span="5" label="结果评定" label-class-name="my-label">
          <el-radio-group v-model="ruleForm.technicianStatus">
            <el-radio :label="'合格'">合格准入</el-radio>
            <el-radio :label="'不合格'">不合格拒入</el-radio>
            <el-radio :label="'让步'">让步接收</el-radio>
          </el-radio-group>
        </el-descriptions-item>
        <el-descriptions-item :span="1" label="操作 (提交给场长审核)" label-class-name="my-label">
          <el-button type="primary" plain @click="submit">提交表单</el-button>
        </el-descriptions-item>
      </template>

      <template v-if="userType == 'FARMER'">
        <el-descriptions-item :span="6" label="场长" label-class-name="my-label">
          <el-select v-model="ruleForm.farmId" class="w100p" placeholder="请选择场长" clearable
            @change="handleChangePersonFarm">
            <el-option v-if="item.type == 'FARMER'" v-for="item, index in personList" :key="index"
              :label="item.staffName" :value="item.staffId"></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item :span="6" label="场长结论" label-class-name="my-label">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.farmResult">
          </el-input>
        </el-descriptions-item>
        <el-descriptions-item :span="5" label="结果评定" label-class-name="my-label">
          <el-radio-group v-model="ruleForm.farmStatus">
            <el-radio :label="'合格'">合格准入</el-radio>
            <el-radio :label="'不合格'">不合格拒入</el-radio>
            <el-radio :label="'让步'">让步接收</el-radio>
          </el-radio-group>
        </el-descriptions-item>
        <el-descriptions-item :span="1" label="操作" label-class-name="my-label">
          <el-button type="primary" plain @click="submit">确认提交</el-button>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import MainSlot from "@/components/MainSlot";
import inspectionPhase from '@/api/basicInformation/inspectionPhase.js';
import inspectionScope from '@/api/basicInformation/inspectionScope.js';

import inspectorAssignment from '@/api/basicInformation/inspectorAssignment.js';
import inspectionManagement from '@/api/inspectionManagement/inspectionManagement';
export default {
  components: { MainSlot },
  props: {
    userType: {
      type: String,
      default: () => {
        return ''
      }
    },
    isEdit: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      btnFlag: true,
      scopeObj: {},
      checkQualityDetailList: [],
      scopeTypeList: [],
      checkStageObj: {},
      resetRadio: true,
      loading: false,
      radioList: [],
      rowList: [],
      ruleForm: {},
      inspectionScopeList: [],
      personList: [],
      totalSocre: -1,
      passSocre:60
    }
  },
  watch: {
    isEdit: {
      handler(v) {
        if (v) {
          this.getInspectionScope();
          this.getRadioList();
        } else {
          this.scopeObj = {};
          this.checkQualityDetailList = [];
          this.scopeTypeList = [];
          this.checkStageObj = {};
          this.resetRadio = true;
          this.loading = false;
          this.radioList = [];
          this.rowList = [];
          this.ruleForm = {};
          this.inspectionScopeList = []
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'codeList'
    ])
  },
  mounted() {
    this.btnFlag = this.codeList.indexOf('submit') !== -1;
    console.log(this.btnFlag)
  },
  methods: {
    async initTableInfo() {
      let { data: personList } = await inspectorAssignment.queryByCondition({ type: this.userType })
      this.personList = personList
      console.log(personList)
      this.ruleForm = { ...this.data }
      this.totalSocre = this.ruleForm.totalSocre;
      this.passSocre = this.ruleForm.passSocre;
      this.checkQualityDetailList = this.data.checkQualityDetailList
      this.scopeTypeList = []
      let checkQualityDetaObj = {}
      if (this.checkQualityDetailList.length > 0) {
        this.checkQualityDetailList.forEach(item => {
          if (!checkQualityDetaObj[item.checkScopeTypeId]) {
            checkQualityDetaObj[item.checkScopeTypeId] = []
          }
          checkQualityDetaObj[item.checkScopeTypeId].push(item)
        });
      }
      this.rowList = [];
      for (let key in checkQualityDetaObj) {
        console.log(this.scopeObj[key])
        this.scopeTypeList.push({
          scopeTypeName: this.scopeObj[key],
          list: checkQualityDetaObj[key]
        })
      }
      console.log(checkQualityDetaObj)
      console.log(this.scopeTypeList)
    },
    handleChangePersonTechnician(id) {
      let row = this.personList.find(item => Number(item.staffId) == Number(id));
      row.staffName && this.$set(this.ruleForm, 'technicianName', row.staffName || '');
    },
    handleChangePersonFarm(id) {
      let row = this.personList.find(item => Number(item.staffId) == Number(id));
      row.staffName && this.$set(this.ruleForm, 'farmName', row.staffName || '');
    },
    //检验阶段
    async getRadioList() {
      let res = await inspectionPhase.queryByCondition({});
      this.radioList = res.data || [];
      this.checkStageObj = {}
      this.radioList.forEach(item => {
        this.checkStageObj[item.checkStageId] = item.checkStageName
      })

    },
    //检验范畴
    async getInspectionScope() {
      let res = await inspectionScope.queryByCondition({});
      this.inspectionScopeList = res.data || [];
      this.scopeObj = {}
      this.inspectionScopeList.forEach(item => {
        console.log(item)
        this.scopeObj[item.checkScopeTypeId] = item.scopeTypeName
      })
      console.log(this.scopeObj)
      this.initTableInfo()
    },
    submit() {
      if (!this.btnFlag) {
        this.$message.warning('无权限操作')
        return
      }
      //如何技术员或场长认为是不合格直接拒绝
      if (this.ruleForm.farmStatus == '不合格' || this.ruleForm.technicianStatus == '不合格') {
        this.ruleForm.status = 'REJECTION'
      } else {
        //如果是场长处理的直接完成，不是场长处理的状态改为场长评定
        if (this.userType == 'FARMER') {
          this.ruleForm.status = 'COMPLETION'
        } else {
          this.ruleForm.status = 'MANAGER_EVALUATION'
        }
      }

      if (this.userType == 'FARMER') {
        if (!this.ruleForm.farmId) {
          this.$message.warning('请选择场长')
          return
        }
        if (!this.ruleForm.farmStatus) {
          this.$message.warning('请选择判定结果')
          return
        }
      } else if (this.userType == 'TECHNICIAN') {
        if (!this.ruleForm.technicianId) {
          this.$message.warning('请选择技术员')
          return
        }
        if (!this.ruleForm.technicianStatus) {
          this.$message.warning('请选择判定结果')
          return
        }
      }
      inspectionManagement.edit({ ...this.ruleForm }).then(res => {
        console.log(res)
        if (res.code == 1) {
          this.$message.success('操作成功')
          this.$emit('closeForm')
        } else {
          this.$message.warning('操作失败')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.inspectionSheet {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  overflow-y: auto;
}

.flex {
  display: flex;
  justify-content: flex-start;

  .f_1 {
    width: 10%;
  }

  .f_2 {
    width: 90%;
  }

  .f_2_1 {
    width: 15%;
  }

  .f_2_2 {
    width: 65%;
  }

  .f_2_3 {
    width: 30%;
  }

}

.th {
  .th_title {

    font-weight: bold;
  }
}

.tr {
  color: #505050;
}

.titleLable {
  width: 100%;
  box-sizing: border-box;
  color: #909399;
  background: #fafafa;
}

.content {
  border: 1px solid #EBEEF5;
  box-sizing: border-box;
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 10px;
}

.message {
  color: red;
}

::v-deep .my-label {
  width: 300px !important;
}

.error {
  color: red;
}

.warning {
  color: orange;
}

.success {
  color: rgb(0, 153, 255);
}

.totalSocre {
  text-align: right;
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
}
.messge{
  color: red;
}

.passSocre{
  padding-right: 20px;
  color: #999999;
}
</style>